<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="initial-scale=1.0,
                   maximum-scale=1.0">
    <title>基础demo实现</title>
    <script src="../js/lib/vue.min.js"></script>
    <style>
        .edit {
            display: block;
            width: 80%;
            height: 35px;
            line-height: 35px;
            margin: 30px auto;
            box-sizing: border-box;
            padding-left: 4px;
            border-radius: 4px;
            border: 1px solid #ccc;
            outline: 0;
            box-shadow: 0 0 5px #ccc;
        }

        .list {
            margin: 0 auto;
            width: 80%;
        }

        .unit {
            position: relative;
            padding: 10px 0;
            border-bottom: 1px solid #efefef;
        }

        .unit:last-child {
            border-bottom: 0;
        }

        .finish {
            text-decoration: line-through;
            color: #ccc;
        }

        .del {
            background: red;
            text-decoration: none;
            position: absolute;
            right: 0;
            font-size: 12px;
            border: 0;
            outline: 0;
            padding: 2px 5px;
            border-radius: 5px;
            color: #fff;
        }

        .empty {
            font-size: 13px;
            color: #ccc;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>
<body>
<div id="app">
    <!--绑定任务内容-->
    <input @keydown.enter="addTask"
            type="text"
           v-model="task.content"
           placeholder="编写任务"
           class="edit">
    <div class="list">
        <div class="unit" v-for="(item,index) in list">
            <!--checkbox添加选中事件-->
            <input type="checkbox" @click="changeState(index)" :checked="item.finished">
            <!--添加选中完成样式-->
            <span :class="{'finish':item.finished}">{{item.content}}</span>
            <button class="del" @click="removeTask(index)">删除</button>
        </div>
    </div>
    <!--如果没有任务，则显示暂无任务-->
    <p v-if="list.length===0" class="empty">暂无任务</p>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            //任务模板
            task:{
                content:'',//内容为空
                finished: false,//未完成
                deleted:false//未删除
            },
            list:[]
        },
        methods:{
            addTask:function(){
                this.list.push(this.task);
                this.task={
                    content: '',//内容为空
                    finished: false,//未完成
                    deleted: false//未删除
                }
            },
            removeTask:function(index){
                this.list.splice(index,1);
            },
            changeState:function (index) {
                let curState = this.list[index].finished;
                this.list[index].finished= !curState;
            }
        }
    });
</script>
</body>
</html>